<!DOCTYPE html>
<html>
    <!--http://download.dojotoolkit.org/release-1.9.0/dojo-release-1.9.0/dojox/mobile/tests/-->
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <title>Accordion</title>

        <link href="dojo/dojox/mobile/themes/common/dijit/dijit.css" rel="stylesheet"/>
        <link href="dojo/dojox/mobile/themes/common/domButtons/DomButtonBlackRightArrow16.css" rel="stylesheet"/>
        <link href="dojo/dojox/mobile/themes/common/domButtons/DomButtonWhiteDownArrow16.css" rel="stylesheet"/>
        <link href="dojo/dojox/mobile/themes/iphone/iphone.css" rel="stylesheet"/>

        <script type="text/javascript" src="deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Accordion','TabBar','dijit.Calendar']"></script>
        <script type="text/javascript" src="dojo/dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>

        <script type="text/javascript">
            require([
                "dojox/mobile/parser",
                "dojox/mobile",
                "dojox/mobile/compat",
                "dojox/mobile/Accordion",
                "dojox/mobile/ContentPane",
                "dojox/mobile/TabBar",
                "dojox/mobile/ScrollableView"
            ]);
        </script>

        <style type="text/css">
            html,body{
                height: 100%;
            }
            html:not(.windows_theme) .myPane {
                background-image: -webkit-gradient(linear, left top, left bottom, from(#dcdcdc), to(#FFFFFF));
                font-family: Times New Roman, Helvetica;
                color: black;
            }
            .windows_theme .mblAccordionPane {
                background-color: transparent !important;
            }
            .windows_theme .mblScrollableViewContainer > div {
                color: white !important;
            }
        </style>
    </head>
    <body style="visibility:hidden;">
        <div id="group1" data-dojo-type="dojox.mobile.View">
            <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='barType:"segmentedControl", fixed:"top"'>
                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"view1"'>Fixed</li>
                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"view2", selected:true'>Multi</li>
                <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='moveTo:"view3"'>Single</li>
            </ul>

            <div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
                <div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='fixedHeight:true, roundRect:true' style="height:380px;">
                    <div data-dojo-type="dojox.mobile.ScrollableView" style="background-color:white"
                         data-dojo-props='label:"ScrollableView", height:"inherit", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16", propagatable:false, appBars:false'>
                        <div style="padding:10px;color:black;">
                            A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z
                        </div>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"External Content", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16", href:"data/fragment1.html"'>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"RoundRectList", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16"'>
                        <ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                u1space
                            </li>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                u2space
                            </li>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                Wi-Fi
                            </li>
                        </ul>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Dojo", icon1:"mblDomButtonBlackRightArrow16", icon2:"mblDomButtonWhiteDownArrow16"' class="myPane">
                        <div style="padding:10px">
                            <div style="font-size: 24px">Unbeatable JavaScript Tools</div>
                            <div style="border-top: 1px dashed gray;margin: 20px"></div>
                            <img alt="" src="images/dojo-logo1.png" style="float:left;margin-right:5px">
                            <p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div id="view2" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='selected:true'>
                <div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='iconBase:"images/icons16.png"'>
                    <div data-dojo-type="dojox.mobile.ScrollableView" style="background-color:white"
                         data-dojo-props='label:"ScrollableView", iconPos1:"16,16,16,16", height:"100px", propagatable:false, appBars:false'>
                        <div style="padding:10px;color:black;">
                            A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z
                        </div>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"External Content", iconPos1:"16,32,16,16", href:"data/fragment1.html"'>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"RoundRectList", iconPos1:"16,48,16,16"'>
                        <ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                u1space
                            </li>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                u2space
                            </li>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                Wi-Fi
                            </li>
                        </ul>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Dojo", iconPos1:"32,16,16,16"' class="myPane">
                        <div style="padding:10px">
                            <div style="font-size: 24px">Unbeatable JavaScript Tools</div>
                            <div style="border-top: 1px dashed gray;margin: 20px"></div>
                            <img alt="" src="images/dojo-logo1.png" style="float:left;margin-right:5px">
                            <p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
                            <p>Dojo's powerful, lightweight core makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.</p>
                        </div>
                    </div>
                </div>
            </div>

            <div id="view3" data-dojo-type="dojox.mobile.ScrollableView">
                <div data-dojo-type="dojox.mobile.Accordion" data-dojo-props='singleOpen:true'>
                    <div data-dojo-type="dojox.mobile.ScrollableView" style="background-color:white"
                         data-dojo-props='label:"ScrollableView", height:"100px", propagatable:false, appBars:false'>
                        <div style="padding:10px;color:black;">
                            A<br>B<br>C<br>D<br>E<br>F<br>G<br>H<br>I<br>J<br>K<br>L<br>M<br>N<br>O<br>P<br>Q<br>R<br>S<br>T<br>U<br>V<br>W<br>X<br>Y<br>Z
                        </div>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"External Content", href:"data/fragment1.html"'>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"RoundRectList"'>
                        <ul data-dojo-type="dojox.mobile.RoundRectList" data-dojo-props='iconBase:"images/tab-icon-11h.png"'>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                u1space
                            </li>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                u2space
                            </li>
                            <li data-dojo-type="dojox.mobile.ListItem" data-dojo-props='rightText:"Off"'>
                                Wi-Fi
                            </li>
                        </ul>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Dojo"' class="myPane">
                        <div style="padding:10px">
                            <div style="font-size: 24px">Unbeatable JavaScript Tools</div>
                            <div style="border-top: 1px dashed gray;margin: 20px"></div>
                            <img alt="" src="images/dojo-logo1.png" style="float:left;margin-right:5px">
                            <p>Dojo saves you time, delivers powerful performance, and scales with your development process. It's the toolkit experienced developers turn to for building superior desktop and mobile web experiences.</p>
                            <p>Dojo's powerful, lightweight core makes common tasks quicker and easier. Animate elements, manipulate the DOM, and query with easy CSS syntax, all without sacrificing performance.</p>
                        </div>
                    </div>
                    <div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='label:"Calendar (Lazy)", lazy:true' height="304px">
                        <div style="padding:10px">
                            <div data-dojo-type="dijit.CalendarLite"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="group2" data-dojo-type="dojox.mobile.ScrollableView">
            group2
        </div>

        <ul data-dojo-type="dojox.mobile.TabBar" data-dojo-props='fixed:"bottom"' style="border-bottom:none;">
            <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-16.png", icon2:"images/tab-icon-16h.png", selected:true, moveTo:"group1"'>Group1</li>
            <li data-dojo-type="dojox.mobile.TabBarButton" data-dojo-props='icon1:"images/tab-icon-15.png", icon2:"images/tab-icon-15h.png", moveTo:"group2"'>Group2</li>
        </ul>
    </body>
</html>
